<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from "vue";

var markers = [
  {
    position: [104.049008, 33.39306],
    id: 0,
    name: "西南",
    rice: "2345亿",
  },
  {
    position: [108.944064, 34.1336686],
    id: 1,
    name: "华中",
    rice: "2345亿",
  },
  {
    position: [102.807671, 24.959403],
    id: 2,
    name: "海南",
    rice: "2345亿",
  },
  {
    position: [116.790131, 39.769258],
    id: 3,
    name: "华北",
    rice: "2345亿",
  },
];

const init = () => {
  //地图实例
  let map = new AMap.Map("container", {
    resizeEnable: true, //自适应大小
    zoom: 5, //初始化视窗,完整的展示中国省份地图
    center: [104.049008, 33.39306],
  });
  // AMap是高德地图的构造函数，这里.Map是创建地图，.Marker是创建坐标点
  //信息窗口实例
  var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
  //遍历生成多个标记点
  for (var i = 0, marker; i < markers.length; i++) {
    var marker = new AMap.Marker({
      position: markers[i].position, //不同标记点的经纬度
      map: map,
      content: `<div onclick="getLen(${markers[i].id})"  style="width: 80px;height: 80px;border-radius: 50%;background: #fff;border:1px solid blue;">
        <span style="position: relative;top:20%;color:blue;font-weight:600;">
        ${markers[i].name}</span> <br/>
        <span style="position: relative;top:20%;color:blue;">${markers[i].rice} 
        </span>
        </div>`,
    });

    marker.on("click", markerClick);
    marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
  }

  function markerClick(e) {
    infoWindow.setContent(e.target.content);
  }

  //函数内的事件
  window.getLen = (id) => {
    // console.log(id);
    for (var i = 0, marker; i < markers.length; i++) {
      if (id === markers[i].id) {
        var marker = new AMap.Marker({
          position: markers[i].position, //不同标记点的经纬度
          map: map,
          content: `<div  style="width: 80px;height: 80px;border-radius: 50%;background: blue;border:1px solid blue;color:white;">
        <span style="position: relative;top:20%;font-weight:600;">
        ${markers[i].name}</span> <br/>
        <span style="position: relative;top:20%;z-index:9999;">${markers[i].rice} 
        </span>
        </div>`,
        });

        marker.on("click", markerClick);
        marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      } else {
        var marker = new AMap.Marker({
          position: markers[i].position, //不同标记点的经纬度
          map: map,
          content: `<div onclick="getLen(${markers[i].id})"  style="width: 80px;height: 80px;border-radius: 50%;background: #fff;border:1px solid blue;">
        <span style="position: relative;top:20%;color:blue;font-weight:600;">
        ${markers[i].name}</span> <br/>
        <span style="position: relative;top:20%;color:blue;">${markers[i].rice} 
        </span>
        </div>`,
        });

        marker.on("click", markerClick);
        marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
    }
  };
};

onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.centerRight {
  padding: 16px;
  padding-top: 20px;
  height: 410px;
  width: 740px;
  border-radius: 5px;
  .bg-color-black {
    height: 380px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 340px;
    }
  }
}

#container {
  display: flex;
  justify-content: center;
  width: 1000px;
  height: 800px;
  float: left;
}
</style>
